<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>baidu map api demo</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=5f60d7b28e2f6dc805c263bc1d524f61&v=1.1&services=true"></script>
		<style type="text/css">
		/* override baidu tipbox style-百度地图提示框的样式改起来太麻烦了，不给力 */
		/*
		#mapWrap .pop img{display:none;}
		#mapWrap .pop .top,#mapWrap .pop .bottom{display:none;}
		#mapWrap .pop .center{background:#000;}
		#mapWrap .pop .BMap_bubble_content{color:#fff;}
		#mapWrap .pop .BMap_bubble_content img{display:inline;}
		*/
		</style> 
	</head>
	<body>
		<div id="baiduMap-demo">
			<div id="mapWrap" style="width:800px;height:480px;margin-top:20px;"></div>
		</div>
		<script id="tpl-item" type="text/x-jquery-tmpl">
			<div class="info">
				<h3 class="tinfo-ttl">${srcName}</h3>
				<em class="tinfo-addr">${addr}</em>
				<p class="tinfo-desc">
					${desc}
					<img id="tinfo-pic${idx}" class="tinfo-pic" width="100" height="60" alt="" src="${pic}" />
				</p>
			</div>
		</script>
		<script type="text/javascript">
			/*
			var local = new BMap.LocalSearch(map, {
			  renderOptions:{map: map}
			});
			local.search("天安门");
			*/
		//<![CDATA[
		(function($){
			window.map=new BMap.Map("mapWrap");
			var city="",kwd="",$tpl=$("#tpl-item"),tipBoxs=[],
			mark=function(point,idx,data){
				if(!data) return;
				data.idx=idx;
				/*
				var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
					offset: new BMap.Size(10, 25),                  // 指定定位位置
					imageOffset: new BMap.Size(0, 0 - idx * 25)   // 设置图片偏移
				});
				*/
				//信息框
				tipBoxs.push(new BMap.InfoWindow($tpl.tmpl(data).html()));
				//标注点
				var myMark=new BMap.Marker(point/*,{icon:myIcon}*/);
				myMark.addEventListener("click", function(){                                        
				   this.openInfoWindow(tipBoxs[idx]);
				   //图片加载完毕重绘infowindow
				   $("#tinfo-pic"+idx).load(function(){
				   		tipBoxs[idx].redraw();
				   });
				});
				map.addOverlay(myMark);
			};
			//获取远程团购数据
			//http://vivasky.com/labs/jqfocus/js/QeeShu.TuanData.js
			$.getScript("http://119.88.56.78:9090/web/getLoad.do?t="+new Date().getTime(),function(){
				QeeTuan_Data=QeeTuan_Data||window.QeeTuan_Data;
				city=QeeTuan_Data.city==""?"北京市":QeeTuan_Data.city;
				kwd=QeeTuan_Data.kwd;
				
				//设置中心点坐标和地图级别
				map.centerAndZoom(new BMap.Point(QeeTuan_Data.cpointX, QeeTuan_Data.cpointY), 11);
				map.addControl(new BMap.NavigationControl()); 		// 导航鱼骨	
				map.addControl(new BMap.ScaleControl());            // 添加比例尺控件 
				
				//其他具体地址
				for(var j=0;j<QeeTuan_Data.items.length;j++){
					// 查找城市坐标,将地址解析结果显示在地图上，并调整地图视野  
					(function(i,d){
						(new BMap.Geocoder()).getPoint(d.addr, function(point1){  
							if (point1) {  
						     	mark(point1,i,d); 
						   	};  
						 }, city); 					
					})(j,QeeTuan_Data.items[j]);
				};				 
				 
			});
		})(jQuery);
		//]]>
		</script> 
		
	</body>
</html>
